<template>
  <div class="my">
    <div class="top">
      <span>我的</span>
    </div>
    <div class="header">
      <div class="hImg">
        <el-avatar icon="el-icon-user-solid"></el-avatar>
      </div>
      <div class="uname">
        <p v-text="username" @click="login"></p>
        <p class="el-icon-mobile" v-text="userphone"></p>
      </div>
      <span @click="loginOrMore" class="el-icon-arrow-right"></span>
    </div>
    <div class="moneyMsg">
      <div class="money" @click="jumpToMoney">
        <span v-if="!user" class="moneyNum1">0元</span>
        <span v-else class="moneyNum1" v-text="user.point + '元'"></span>
        <p>我的余额</p>
      </div>
      <div class="coupon" @click="jumpToCoupon">
        <span v-if="!user" class="moneyNum2">0个</span>
        <span v-else class="moneyNum2" v-text="user.gift_amount + '个'"></span>
        <p>我的优惠</p>
      </div>
      <div class="point" @click="jumpToPoint">
        <span v-if="!user" class="moneyNum3">0分</span>
        <span v-else class="moneyNum3" v-text="user.point + '分'"></span>
        <p>我的积分</p>
      </div>
    </div>
    <van-cell-group>
      <van-cell title="我的订单" icon="label-o" is-link to="order" />
      <van-cell title="积分商城" icon="bag-o" is-link to="point" />
      <van-cell title="饿了么会员卡" icon="vip-card-o" is-link to="index" />
    </van-cell-group>
    <van-cell-group>
      <van-cell title="服务中心" icon="service-o" is-link to="index" />
      <van-cell title="下载饿了么APP" icon="down" is-link to="index" />
    </van-cell-group>
    <BottomNav></BottomNav>
  </div>
</template>

<script>
import { mapState } from "vuex";
import BottomNav from "../BottomNav";
export default {
  name: "my",
  data() {
    return {
      userphone: "暂无绑定手机号",
      username: "登录/注册",
      user: {}, //用户信息
    };
  },
  created() {
    this.user = this.userLoginMsg;
    //获取用户登录信息
    if (this.userLoginMsg) {
      this.username = this.userLoginMsg.username;
      if (this.userLoginMsg.mobile) {
        this.userphone = this.userLoginMsg.mobile;
      }
    }
  },
  methods: {
    // 登陆
    login() {
      this.$router.push({
        name: "login",
      });
    },
    loginOrMore() {
      if (!this.userLoginMsg) {
        this.$router.push({
          name: "login",
        });
      }else{
              this.$router.push({
        name: "userMsg",
      });
      }

    },
    jumpToMoney() {
      this.$router.push({
        name: "money",
      });
    },
    jumpToCoupon() {
      this.$router.push({
        name: "coupon",
      });
    },
    jumpToPoint() {
      this.$router.push({
        name: "point",
      });
    },
  },
  computed: {
    ...mapState(["eleUrl", "userLoginMsg"]),
  },
  components: { BottomNav },
};
</script>

<style scoped>
.my {
  font-size: 0.15rem;
  background-color: rgb(231, 231, 231);
}
.top {
  text-align: center;
  line-height: 0.4rem;
  font-size: 0.2rem;
  color: white;
  height: 0.4rem;
  width: 100%;
  background-color: rgb(80, 143, 238);
}
.header {
  padding: 0.3rem 0;
  padding-bottom: 0.6rem;
  width: 100%;
  background-color: rgb(80, 143, 238);
}
.hImg {
  float: left;
  width: 20%;
}
.hImg > .el-avatar {
  display: block;
  margin: 0 auto;
}
.uname {
  float: left;
  color: white;
}
.uname > p {
  margin: 0.01rem;
}
.el-icon-arrow-right {
  color: white;
  float: right;
  margin-right: 0.2rem;
  margin-top: 0.1rem;
}
/* 余额部分 */
.moneyMsg {
  background-color: #fff;
  overflow: hidden;
}
.money,
.coupon,
.point {
  color: gray;
  float: left;
  width: 33%;
  height: 0.8rem;
  line-height: 0.3rem;
  text-align: center;
  padding-top: 0.2rem;
  border-right: 0.01rem solid #ddd;
  border-bottom: 0.01rem solid #ddd;
}
.moneyNum1,
.moneyNum2,
.moneyNum3 {
  font-size: 0.2rem;
  font-weight: 800;
}
.moneyNum1 {
  color: orange;
}
.moneyNum2 {
  color: red;
}
.moneyNum3 {
  color: rgb(102, 170, 0);
}
.van-icon {
  width: 0.2rem;
}
</style>